$(function(){
	'use strict';
	function barrel(dom){
		if(!(this instanceof barrel)){
			return new barrel(dom);
		}
		this.root = dom;
		this.width = dom.width()-17;
		this.preordainHeight = 200;		//预定高度
		this.proportion = this.width / this.preordainHeight;		//预定比例
		this.init();
	}

	barrel.prototype = {
		constructor: barrel,
		init: function(){
			var self = this;
			this._getData(this._setDate);
			this.root[0].addEventListener('click',function(e){
				self.amplification.call(self,e);
			},false);
			window.onresize = function(){
				location.replace(location.href);
			};
		},  
		_getData: function(fn){
			this.imgList = [];
			this.index = 0;
			function validation(){
				if(this.index == 159){
					fn.call(this);
				}
				this.index++;
			}
			for(var i = 0; i < 160; i++){
				var img = new Image();
				img.onload = validation.bind(this);
				img.src = "img/2 ("+(i+1)+").jpg";
				this.imgList.push(img);
			}
		}, 
		_setDate: function(){
			var a = this;
			this.data = [];
			var temp = [], widthTotal = 0;
			for(var i = 0, len = this.imgList.length; i < len; i++){
				temp.push(this.imgList[i]);
				var width = this.preordainHeight/this.imgList[i].height * this.imgList[i].width;
				widthTotal += width;
				if(widthTotal > this.width){
					this.data.push(temp);
					this.data.push(this.width/widthTotal*this.preordainHeight);
					temp = [];
					widthTotal = 0;
				}
			}
			this._render();
		}, 
		_render: function(){
			for(var i = 0, len = this.data.length; i < len; i += 2){
				var temp = this.data[i+1];
				for(var j = 0, len1 = this.data[i].length; j < len1; j++){
					$('<img>').attr('src',this.data[i][j].src).css({
						'padding': '8px',
						'height': temp+'px',
						'width': Math.floor(temp/this.data[i][j].height*this.data[i][j].width) + 'px',
						'display': 'inline-block',
						'border': '1px solid #ccc',
						'border-radius': '5px'
					}).appendTo(this.root);
				}
			}
		}, 
		amplification: function(e){
			var e = e || window.event;
			if(e.target.parentNode === this.root[0]){
				this.mask = document.createElement('div');
				this.mask.style.position = 'fixed';
				this.mask.style.top = 0;
				this.mask.style.left = 0;
				this.mask.style.right = 0;
				this.mask.style.bottom = 0;
				this.mask.style.background = 'rgba(0,0,0,0.8)';
				document.body.appendChild(this.mask);
				this.nowPic = document.createElement('div');
				this.nowPic.innerHTML = '<img src="'+ e.target.src+'">';
				this.nowPic.style.position = 'fixed';
				var img = new Image();
				img.src = e.target.src;
				if(img.width > document.documentElement.clientWidth ){
					img.height = document.documentElement.clientWidth/img.width*img.height;
					img.width = document.documentElement.clientWidth;
				}
				if(img.height > document.documentElement.clientHeight){
					img.width = document.documentElement.clientHeight/img.height*img.width;
					img.height = document.documentElement.clientHeight;
				}
				this.nowPic.children[0].style.width = '100%';
				this.nowPic.style.width = img.width + 'px';
				this.nowPic.style.height = img.height + 'px';
				this.nowPic.style.top = (document.documentElement.clientHeight - img.height)/2 +'px';
				this.nowPic.style.left = (document.documentElement.clientWidth - img.width)/2 + 'px';
				this.nowPic.style.zIndex = 1000;
				document.body.appendChild(this.nowPic);
				this.show();
				this.hide();
			}
		}, 
		show: function(a){
			var self = this;
			if(a === undefined){
				var a = 0;
			}
			self.mask.style.opacity = a;
			self.nowPic.style.transform = 'scale('+a+','+a+')';
			a += 0.03;
			self.id = requestAnimationFrame(self.show.bind(self,a));
			if(a > 1){
				cancelAnimationFrame(self.id);
			}
		},
		hide: function(){

			this.mask.addEventListener('click',this._hide.bind(this),false);
		},
		_hide: function(e,a){
			var self = this;
			if(a === undefined){
				var a = 1;
			}
			self.mask.style.opacity = a;
			self.nowPic.style.transform = 'scale('+a+','+a+')';
			a -= 0.03;
			self.id = requestAnimationFrame(self._hide.bind(self,e,a));
			if(a < 0){
				cancelAnimationFrame(self.id);
				document.body.removeChild(self.mask);
				document.body.removeChild(self.nowPic);
			}
		},
	};
	barrel($('.wrap'));

});